<template>
  <div>
  <navbar></navbar>
  <div class="doc-container" id="doc-container">
    <div class="container-fixed">
      <div class="timeline-box shadow">
        <div class="timeline-main">
          <h1><i class="fa fa-clock-o"></i>日记</h1>
          <div class="timeline-line"></div>
          <div class="timeline-year" v-for="item in  records" >
            <h2><a class="yearToggle">{{item.year}}</a><i class="fa fa-caret-down fa-fw"></i></h2>
            <div class="timeline-month">
              <ul>
                <li v-for="article in item.articles">
                  <div class="h4 animated fadeInLeft">
                    <p class="date">{{article.createTime}}</p>
                  </div>
                  <p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
                  <div class="content animated fadeInRight">{{article.title}}</div>
                  <div class="clear"></div>
                </li>

              </ul>
            </div>
          </div>
          <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
        </div>
      </div>
    </div>
  </div>
  <footer1></footer1>
  </div>
</template>
<script>
module.exports={
  name: "diary",
  components: {
    'navbar': httpVueLoader('../components/navbar.vue'),
    'footer1': httpVueLoader('../components/footer.vue'),
  },
  data() {
    return {
      records: []
    }
  },
  mounted(){
    this.getArticles()
  },
  methods: {
    getArticles(){
      axios.get('/blog/api/diary')
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.records=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    }
  }
}
</script>
<style src="/source/css/timeline.css" scoped></style>
